import React, { Component } from 'react';
import './index.css';

import FormInput from '../../core/components/form.input';
import FormSelect from '../../core/components/form.select';
import Dialog from '../../core/utils/dialog';
import { Get, Post, PostString, getHost, UpdateFile } from '../../core/utils/fetch';
import Header from '../../core/components/header';

const idMatch = /id=(\d+)/

class UserEdit extends Component {

    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor(props) {
        super(props);
        const m = idMatch.exec(props.location.search);
        this.state = {
            id: m && m.length > 1 ? m[1] : null,
            edit: (m && m.length > 1),
            userInfo: {}
        };
    }

    componentDidMount = () => {
        const {
            id,
            edit
        } = this.state;
        if (this.state.edit) {
            Get(`/spi/customer/detail/${id}`)
                .then((userInfo) => {
                    this.setState({
                        userInfo
                    });
                });
        }
    };

    render() {
        const {
            id,
            edit,
            userInfo
        } = this.state;
        return (
            <div>
                <Header title="用户账号填写/编辑" subTitle="Account Manage"></Header>
                <div className="">
                    <div className="row">
                        <div className="col-lg-4">
                            <form role="form">
                                <FormInput className="has-success" label="姓名*" name="name" dataItem={userInfo}></FormInput>
                                <div className='form-group has-success'>
                                    <label className="control-label" style={{ "marginTop": "5px", "marginRight": "5px" }}>初始密码:</label>
                                    <span>huiruide666</span>
                                </div>
                                <FormInput className="has-success" label="手机号码*" name="mobilePhone" dataItem={userInfo}></FormInput>
                                <div className="color-green">
                                    带*为必填项
                                </div>

                                <div className='form-group' style={{marginTop: '10px'}}>
                                    <button type="button" className="btn btn-primary" style={{ "marginRight": "10px" }} onClick={this._save}>保存</button>
                                    {
                                        edit ?
                                        (
                                            <button type="button" className="btn btn-primary" style={{ "marginRight": "10px" }} onClick={this._save}>重置初始密码</button>
                                        ) : null
                                    }
                                    <button type="button" className="btn btn-default" onClick={this._back}>取消</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    _save = () => {
        const {
            userInfo,
            edit
        } = this.state,
        url = edit ? `/spi/customer/update?name=${userInfo.name}&custId=${userInfo.id}` : `/spi/customer/add?name=${userInfo.name}&mobilePhone=${userInfo.mobilePhone}`,
        data = edit ? {
            custId: userInfo.id,
            name: userInfo.name
        } : userInfo;
        Post(url)
            .then((r) => {
                Dialog.alert(edit ? '更新成功' : '新增成功', () => {
                    this._back();
                });
            });
    };

    _resetPassword = () => {
        const {
            id
        } = this.state;
        Get(`/spi/customer/resetPwd/${id}`)
            .then(() => {
                Dialog.alert('密码重置成功', () => {
                    this._back();
                });
            });
    };

    _back = () => {
        this.context.router.history.goBack();
    };

}

export default UserEdit;